<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
	background-image: url(4.jpg);
	/* 把背景图片放大到适合元素容器的尺寸，图片比例不变， */
	background-size: cover;
	/* background-repeat: no-repeat; */
}
img{
	opacity: 0.8;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.inp{
	height: 35px;
	border: 3px solid #aee1ec;
	/* border: none; */
	border-radius: 15px;
	background-color: #f9f9f9;
}
.kuang{
	display: block;
	font-size: 20px;
	padding: 5px;
	/* text-align: center; */
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 53px;
	/* width: 400px; */
}
/* 提示语的颜色设置 */
.error{
	color: #ff0000;
}
#zhuce{
	/* background: #f9f9f9; */
	background: rgba(255,255,255,0.4);
	/* opacity: 0.9; */
	position: relative;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	border: 5px solid #989898;
	border-radius: 50px;
	width: 500px;
	box-shadow: 15px 20px 15px #5b5b5b;
	display: block;
	/* text-align: center; */
}
.sub{
	margin-left: 100px;
	margin-bottom: 20px;
	font-size: 25px;
	width: 250px;
	height: 40px;
	background-color: #06bf9a;
	border: none;
	/* border: 5px #5cff92 outset; */
	border-radius: 15px;
	/* 手势 */
	cursor: pointer;
}
#check{
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 60px;
}
a{
	color: #FF0000;
	text-decoration: none;
}
/* 验证码 */
#yzm{
	width: 370px;
}
#canvas{
	float: right;
	border-radius: 5px;
	display: inline-block;
	cursor: pointer;
}
#yan{
	color: #FF0000;
	margin-left: 90px;
	font-size: 18px;
}

    </style>
</head>
<body>
    <form action="#" method="get" id="zhuce">
      
        <!-- <h3>用户注册</h2> -->
        <div class="kuang">
            <span>用户名</span>
            <!-- 空格占位符 一个中文空格+四分之一空格 -->
            &#8194;&#8197;
            <input type="text" class="inp" id="user" name="username" placeholder="请输入用户名" />
        </div>
        <div class="kuang">
            <span>设置密码</span>
            <input type="password" class="inp" id="pwd" name="password" placeholder="请输入密码" />
        </div>
        <div class="kuang">
            <span>确认密码</span>
            <input type="password" class="inp" id="second_pwd" name="second_pwd" placeholder="请再次输入密码" />
        </div>
        <div class="kuang">
            <span>电子邮箱</span>
            <input id="email" class="inp" name="email" type="email" placeholder="请输入正确的邮箱格式">
        </div>
        <div class="kuang">
            <select style="width: 80px;height: 30px;">
                <option value="中国 +86" selected >中国 +86</option>
                <option value="中国香港特别行政区 +852">中国香港特别行政区 +852</option>
                <option value="中国澳门特别行政区 +853" >中国澳门特别行政区 +853</option>
                <option value="中国台湾地区 +886" >中国台湾地区 +886</option>
            </select>
            <input type="text" class="inp" name="phone" placeholder="手机号码" />
        </div>
        
        <!-- 自己添加的 验证码jqc插件 -->
        <div class="kuang" id="yzm">
            <label>验证码</label>&#8194;&#8197;
            <input type="text" placeholder="验证码不区分大小写" class="inp" id="input-val"/>
            <canvas id="canvas" width="100" height="43" style="background-color: #fff;"></canvas>
            <br />
            <label id="yan"></label>
        </div>
        
        <div id="check">
            <input type="checkbox" style="padding-top: 80px;" ><label>我已阅读并同意</label>
            <a target="_blank" href="#">《使用条款》</a>
            及
            <a target="_blank" href="#">《非活跃帐号处理规范》</a>
        </div>
        
        <div><button type="submit" class="sub">提交</button></div>
    </form>
    
</body>
<script src="jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 表单验证jquery插件 validate -->
<script src="jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入code.js-验证码.js -->
<script src="code.js" type="text/javascript" charset="utf-8"></script>

<script>
    $(function(){
	// Validate 插件为表单提供验证功能
	$("#zhuce").validate({
		rules:{
			// 绑定的是 name 
			username:{
				required: true,
			},
			password:{
				required: true,
				rangelength:[8,20],
			},
			second_pwd:{
				required: true,
				rangelength:[8,20],
				equalTo:"#pwd",
			},
			email:{
				required: true,
				email:true,
			},
			phone:{
				required: true,
				minlength:11,
			}
		},
		messages:{
			username:'请输入用户名',
			password:{
				required:'密码不能为空',
				rangelength:"密码长度在8~20位",
			},
			second_pwd:{
				required:'密码不能为空',
				rangelength:"密码长度在8~20位",
				equalTo:'两次密码不同',
			},
			email:{
				required:'请输入电子邮箱',
				email:'请输入正确的邮箱格式',
			},
			phone:{
				required:"手机号码不能为空",
				minlength:"手机号应为11位",
			},
		}
		
	});
	// 验证码 jquery代码
	code_draw();
	// 点击后刷新验证码
	$("#canvas").on('click', function() {
		code_draw();
	})
	$(".sub").on('click', function() {
		// 将输入的内容转为大写，可通过这步进行大小写验证
		let val = $("#input-val").val().toLowerCase();
		// 获取生成验证码值
		var num = $('#canvas').attr('data-code');
		if (val == '') {
			// alert('请输入验证码！');
			// $("<br>"+"<label >验证码为空</label>").appendTo("#yan");
			$("#yan").text("验证码不能为空");
		} else if (val == num) {
			// alert('提交成功！');
			$("#yan").text("验证码输入正确");
			$("#input-val").val('');
			draw(show_num);
	
		} else {
			// alert('验证码错误！请重新输入！');
			$("#yan").text("验证码错误！请重新输入！");
			$("#input-val").val('');
			draw(show_num);
		}
		// console.log(1);
	});
});
$.validator.setDefaults({
    submitHandler: function() {
      alert("表单提交成功!!!!");
    }
});

</script>
</html>